<template>
  <div>
    <!-- 面包屑指引 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 添加商品 -->
    <el-button type="success" id="addsss" @click="dialogFormVisible = true"
      >添加分类</el-button
    >
    <!-- 渲染的数据，以父子级渲染 -->
    <el-table
      :data="caredata"
      style="width: 100%; margin-bottom: 20px"
      row-key="cat_id"
      border
      id="baibaishop"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="cat_id" label="分类ID" sortable width="180">
      </el-table-column>
      <el-table-column prop="cat_name" label="分类名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="cat_pid" label="分类父ID"> </el-table-column>
      <el-table-column prop="cat_level" label="分类当前层级">
        <!-- 利用插槽来访问子元素里边的值，使其状态改变 -->
        <template slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === '0'">一等</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level === '1'"
            >二等</el-tag
          >
          <el-tag type="info" v-else>三等</el-tag>
        </template>
      </el-table-column>
      <!-- 操作的按钮 -->
      <el-table-column label="操作">
        <!-- 利用插槽访问子组件的数据 -->
        <template slot-scope="scope">
          <!-- 查找 -->
          <el-button
            icon="el-icon-search"
            circle
            size="mini"
            @click="xunzhao(scope.row)"
          ></el-button>
          <!-- 编辑分类 -->
          <el-button
            type="primary"
            round
            size="mini"
            @click="putusers(scope.row)"
          >
            <i class="el-icon-edit-outline"></i>
            编辑分类</el-button
          >
          <!-- 删除分类 -->
          <el-button
            type="danger"
            round
            size="mini"
            @click="output(scope.row.cat_id)"
          >
            <i class="el-icon-smoking"></i>
            删除分类</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页的数据 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 8, 13, 17]"
      :page-size="userfofo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加商品弹出框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="shoppen">
        <el-form-item label="分类id">
          <el-input
            v-model="shoppen.cat_pid"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="shoppen.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类层级">
          <el-input
            v-model="shoppen.cat_level"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="givesize">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查找分类商品 -->
    <el-dialog title="查找分类" :visible.sync="dialogFormgivessVisible">
      <el-form :model="zhaodao">
        <el-form-item label="分类id">
          <el-input v-model="zhaodao.cat_id" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="zhaodao.cat_name" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="分类父id">
          <el-input
            v-model="zhaodao.cat_pid"
            autocomplete="off"
            type="number"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类当前层级">
          <el-input
            v-model="zhaodao.cat_level"
            autocomplete="off"
            type="number"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑分类弹出框 -->
    <el-dialog title="编辑分类" :visible.sync="dialogFormssVisible">
      <el-form :model="putinput">
        <el-form-item label="分类id">
          <el-input
            v-model="putinput.cat_pid"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="putinput.cat_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类层级">
          <el-input
            v-model="putinput.cat_level"
            autocomplete="off"
            type="number"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormssVisible = false">取 消</el-button>
        <el-button type="primary" @click="givesput">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //渲染的保存数据
      caredata: [],
      //总商品数量
      total: 0,
      //需要的参数集合
      userfofo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      //添加的数据
      dialogFormVisible: false,
      shoppen: {
        cat_pid: 0,
        cat_name: "",
        cat_level: 0,
      },
      // 查找数据
      dialogFormgivessVisible: false,
      zhaodao: {},
      //编辑分类数据
      dialogFormssVisible: false,
      putinput: {},
    };
  },
  methods: {
    // 删除分类
    output(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let { data } = await this.$req.delete("categories/" + id);
        if (data.meta.status == 200) {
          this.$message({
            type: "success",
            message: data.meta.msg,
          });
          this.baibai();
        } else {
          this.$message({
            type: "error",
            message: data.meta.msg,
          });
        }
      });
    },
    // 编辑分类数据
    async givesput() {
      let { data } = await this.$req.put(
        "categories/" + this.putinput.cat_id,
        this.putinput
      );
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.dialogFormssVisible = false;
        this.baibai();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    // 编辑获取数据
    putusers(userinfo) {
      this.dialogFormssVisible = true;
      this.putinput = userinfo;
    },
    // 查找分类商品
    xunzhao(userinfo) {
      this.dialogFormgivessVisible = true;
      this.zhaodao = userinfo;
    },

    // 添加商品
    async givesize() {
      let { data } = await this.$req.post("/categories", this.shoppen);
      if (data.meta.status == 201) {
        this.$message({
          type: "succss",
          message: data.meta.msg,
        });
        //关闭弹窗
        this.dialogFormVisible = false;
        this.baibai();
      }
    },
    //设置每页的页数
    handleCurrentChange(pagenum) {
      this.userfofo.pagenum = pagenum;
      this.baibai();
    },
    //设置页面跳转时的条数
    handleSizeChange(pagesize) {
      this.userfofo.pagesize = pagesize;
      this.baibai();
    },
    //公用封装方法
    async baibai() {
      let { data } = await this.$req.get("categories", {
        params: this.userfofo,
      });
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.caredata = data.data.result;
        this.total = data.data.total;
      } else {
        this.$message.error(data.meta.msg);
      }
    },
  },

  //页面加载数据
  mounted() {
    this.baibai();
  },
};
</script>

<style>
#addsss {
  position: absolute;
  top: 120px;
  left: 50%;
}
#baibaishop {
  margin-top: 100px;
}
</style>